<template>
  <view class="update-log">
    <view class="content-view">
      <scroll-view
        scroll-y
        style="height: 100%; width: 100%"
        @scrolltolower="reachBottom"
        scroll-anchoring
        refresher-enabled="true"
        :refresher-triggered="triggered"
        :refresher-threshold="100"
        refresher-background="#F6F7FA"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        enable-back-to-top
      >
        <view class="scroll-view">
          <NoData v-if="noData" customStyle="margin-top: 0rpx;" />
          <view v-else>
            <view class="bill-list"
              ><update-log-item
                v-for="(item, index) in list"
                :key="index"
                :detail="item"
                :checked="index === 0"
              ></update-log-item
            ></view>
            <view
              class="load-more-view"
              v-show="(current == 1 && loaded) || current > 1"
              ><u-loadmore :status="loadStatus" bgColor="#F6F7FA"></u-loadmore
            ></view>
          </view>
          <view class="loading-view" v-if="!loaded && !freshing"
            ><up-loading-icon></up-loading-icon
          ></view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import NoData from "@/components/no-data";
import UpdateLogItem from "./components/update-log-item.vue";
import { getList, markLog } from "@/api/mine/update-log.js";
import { ref, computed, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";

const list = ref([]);
const loaded = ref(false);
const current = ref(1);
const size = ref(10);
const loadStatus = ref("loading");
const triggered = ref(true);
const freshing = ref(false);

const noData = computed(() => {
  return (list.value || []).length == 0 && loaded.value;
});
onLoad(() => {
  //   reloadList();
  loaded.value = true;
  triggered.value = false;
  freshing.value = false;
});
const reloadList = () => {
  if (freshing.value) {
    triggered.value = false;
    freshing.value = false;
  }
  loaded.value = true;
  return false;

  current.value = 1;
  loadStatus.value = "loading";
  getPage();
};
const getPage = async () => {
  if (current.value == 1) {
    list.value = [];
    loaded.value = false;
  }
  try {
    let params = {
      current: current.value,
      size: size.value,
    };
    let res = await getList(params);
    let { records, total } = res.data;
    if (records) {
      list.value.push(...records);
      // 更新底部加载状态
      loadStatus.value = total > list.length ? "loadmore" : "nomore";
    }
    setTimeout(() => {
      nextTick(() => {
        if (freshing.value) {
          triggered.value = false;
          freshing.value = false;
        }
      });
    }, 500);
    mark();
  } catch (e) {
    //TODO handle the exception
    loadStatus = "loadmore";
    console.log("error", e);
    nextTick(() => {
      if (freshing.value) {
        triggered.value = false;
        freshing.value = false;
      }
    });
  }
  loaded.value = true;
};
const onRefresh = () => {
  if (freshing.value) return;
  freshing.value = true;
  reloadList();
};
const onRestore = () => {
  triggered.value = "restore"; // 需要重置
};
// 滚动底部
const reachBottom = () => {
  if (loadStatus.value != "loadmore") return;
  current.value += 1;
  loadStatus.value == "loading";
  getList();
};
const mark = async () => {
  try {
    await markLog();
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};
</script>

<style lang="scss" scoped>
.update-log {
  padding: 32rpx 24rpx;
  width: 100%;
  height: 100%;
  .content-view {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .scroll-view {
      width: 100%;
      height: 100%;
    }
    .load-more-view {
      margin-top: 24rpx;
      padding-bottom: 44rpx;
    }
    .loading-view {
      width: 100%;
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 50%;
      left: 0;
      position: fixed;
    }
  }
}
</style>
